<template>
  <view class="contents">
    <view class="title">
      {{ data.name }}
      <!-- <u-icon class='iconleft' name="arrow-right-double" size="28"></u-icon> -->
      <view
        v-if="data.cachePath"
        class="iconleft1"
        style="color: #fff"
        @click.stop="handleDeleteCache(data)"
      >
        <text style="margin-right:10rpx;"></text>
        <!-- 通用安装指导 -->
        已缓存
      </view>
      <view
        v-else
        class="iconleft"
        style="color: #fff"
        @click.stop="handleCache(data)"
      >
        <text style="margin-right:10rpx;"></text>
        <!-- 通用安装指导 -->
        未缓存
      </view>

    </view>
    <view class="detail">
      <!-- <view class="time">
        <image
          src="@/static/images/system.png"
          class="imageBg"
        />
        <view class="text">合同号：{{ data.system }}</view>
      </view> -->
      <!-- <view class=""> 所在地区：{{ data.position }} </view> -->
      <view>
        <view class="time">
          <image
            style="height:30rpx"
            src="@/static/images/hezi.png"
            class="imageBg"
          />
          <view
            class="text"
            style="line-height:28rpx"
          >产品代码：{{ data.deviceCode }}</view>
        </view>
        <view class="time">
          <image
            style="eight:30rpx"
            src="@/static/images/biaoqianlan_shouye.png"
            class="imageBg"
          />

          <view
            class="text"
            style="line-height:28rpx"
          >备注：{{ data.description }}</view>
        </view>
      </view>
      <view
        v-if="data.deviceId"
        class="icon-img sjtz"
        @click="handlesjtz(data)"
      >
        <image
          src="../../../static/images/pdf.png"
          class="image-icon"
        />
        <text>产品竣工图</text>
      </view>
      <view
        class="icon-img video"
        @click="handleVideo(data)"
      >
        <image
          src="../../../static/images/video.png"
          class="image-icon"
        />
        <text>视频</text>
      </view>
      <view
        class="icon-img pdf"
        disabled
        @click="handlePdf(data)"
      >
        <image
          src="../../../static/images/pdf.png"
          class="image-icon"
        />
        <text>文档</text>
      </view>
      <!-- <view
        v-if="data.cachePath"
        class="box-button box-delete"
        @click.stop="handleDeleteCache(data)"
      >
        已缓存
      </view>
      <view
        v-else
        class="box-button box-cache"
        @click.stop="handleCache(data)"
      >
        缓存
      </view> -->
    </view>

  </view>
</template>
<script>
export default {
  props: {
    data: {
      type: Object,
      default: 0
    }
  },
  data() {
    return {};
  },
  methods: {
    handleCache(dataImte) {
      let that = this;

      let cacheList = uni.getStorageSync("cacheList");
      let arrList = [];
      uni.showLoading({
        title: "下载中",
        mask: true
      });

      uni.downloadFile({
        url: this.fileUrl + dataImte.videoPath, //下载地址接口返回
        success: data => {
          if (data.statusCode === 200) {
            // uni.showToast({
            //   title: "下载成功",
            //   icon: "none"
            // });
            //文件保存到本地
            uni.saveFile({
              tempFilePath: data.tempFilePath, //临时路径
              success: function(res) {
                // uni.showToast({
                //   icon: "none",
                //   mask: true,
                //   title: "文件已保存：" + res.savedFilePath, //保存路径
                //   duration: 3000
                // });
                uni.getSavedFileInfo({
                  filePath: res.savedFilePath,
                  success: function(rsp) {
                    arrList = [
                      {
                        contractNumber: dataImte.contractNumber,
                        productNumber: dataImte.productNumber,
                        name: dataImte.name,
                        videoPath: dataImte.videoPath,
                        filePath: dataImte.filePath,
                        cachePath: res.savedFilePath,
                        size: rsp.size,
                        createTime: rsp.createTime
                      }
                    ];
                    uni.setStorageSync("cacheList", cacheList.concat(arrList));
                    that.$emit("cache");
                    uni.hideLoading();
                    uni.showToast({
                      icon: "none",
                      title: "缓存成功"
                    });
                  }
                });

                //   setTimeout(() => {
                //     //打开文档查看
                //     uni.openDocument({
                //       filePath: res.savedFilePath,
                //       success: function(res) {
                //         // console.log('打开文档成功');
                //       }
                //     });
                //   }, 3000);
              }
            });
          }
        },
        fail: err => {
          uni.showToast({
            icon: "none",
            mask: true,
            title: "失败请重新下载"
          });
        }
      });
    },
    handleDeleteCache(item) {
      let that = this;
      let cacheList = uni.getStorageSync("cacheList");
      // 删除视频
      uni.showModal({
        title: "提示",
        content: `是否清除视频‘${item.name}’的缓存`,
        success: function(rsp) {
          if (rsp.confirm) {
            uni.showLoading({
              title: "清除中",
              mask: true
            });
            uni.removeSavedFile({
              filePath: item.cachePath,
              complete: function(res) {
                cacheList.forEach((val, index) => {
                  if (val.cachePath === item.cachePath) {
                    cacheList.splice(index, 1);
                    // this.data.cachePath = "";
                    delete that.data.cachePath;
                    uni.setStorageSync("cacheList", cacheList);
                    that.$emit("cache");
                    uni.hideLoading();
                    uni.showToast({
                      icon: "none",
                      title: "清除成功"
                    });
                  }
                });
              }
            });
          } else if (rsp.cancel) {
          }
        }
      });
    },
    handleVideo(data) {
      var that = this;
      if (data.videoPath) {
        if (data.cachePath) {
          uni.navigateTo({
            url: "/pages/video/video?data=" + JSON.stringify(data)
          });
        } else {
          uni.getNetworkType({
            success: function(res) {
              if (res.networkType === "wifi") {
                uni.navigateTo({
                  url: "/pages/video/video?data=" + JSON.stringify(data)
                });
              } else {
                uni.showModal({
                  title: "提示",
                  content:
                    "当前处于非wifi网络环境下,继续使用可能产生流量,是否继续播放",
                  success: function(res) {
                    if (res.confirm) {
                      uni.navigateTo({
                        url: "/pages/video/video?data=" + JSON.stringify(data)
                      });
                    } else if (res.cancel) {
                    }
                  }
                });
              }
            }
          });
        }
      } else {
        uni.showToast({
          title: "暂无",
          icon: "none",
          duration: 2000
        });
      }
    },
    handlePdf(data) {
      if (data.filePath) {
        let url = this.fileUrl + data.filePath;
        // uni.navigateTo({
        //   url: '/pages/video/pdf?url=' + url
        // });
        uni.showLoading({
          title: "加载中"
        });
        const that = this;
        uni.downloadFile({
          url: url,
          success: function(res) {
            uni.hideLoading();
            uni.openDocument({
              filePath: res.tempFilePath,
              success: function(rsp) {}
            });
          },
          fail(err) {
            console.log(err);
            uni.showToast({
              title: "暂不支持此类型",
              icon: "none",
              duration: 2000
            });
          }
        });
      } else {
        uni.showToast({
          title: "暂无",
          icon: "none",
          duration: 2000
        });
      }
    },
    handlesjtz(data) {
      console.log(data.sjtz);
      if (data.sjtz) {
        let url = this.fileUrl + data.sjtz;
        // uni.navigateTo({
        //   url: '/pages/video/pdf?url=' + url
        // });
        uni.showLoading({
          title: "加载中"
        });
        const that = this;
        uni.downloadFile({
          url: url,
          success: function(res) {
            uni.hideLoading();
            uni.openDocument({
              filePath: res.tempFilePath,
              success: function(rsp) {}
            });
          },
          fail(err) {
            console.log(err);
            uni.showToast({
              title: "暂不支持此类型",
              icon: "none",
              duration: 2000
            });
          }
        });
      } else {
        uni.showToast({
          title: "暂无",
          icon: "none",
          duration: 2000
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.contents {
  position: relative;
  margin-bottom: 20rpx;
  background-color: white;
  padding: 20rpx 20rpx 70rpx 20rpx;
  background: #ffffff;
  border: 1px solid #eee;
  border-radius: 16rpx;
  box-shadow: 0 0 20rpx #eee;
  .title {
    font-size: 34rpx;
    font-weight: 600;
    margin-bottom: 10rpx;
    color: #333333;
    width: 80%;
    .iconleft {
      font-size: 22rpx;
      position: absolute;
      right: 0;
      top: 0;
      font-weight: 500;
      padding: 0rpx 30rpx;
      border-bottom-left-radius: 100rpx;
      border-top-right-radius: 32rpx;
      background: linear-gradient(145deg, #ff9494, #ff0000);
      // margin-top: 4rpx;
    }
    .iconleft1 {
      font-size: 22rpx;
      position: absolute;
      right: 0;
      top: 0;
      font-weight: 500;
      padding: 0rpx 30rpx;
      border-bottom-left-radius: 100rpx;
      border-top-right-radius: 32rpx;
      background: linear-gradient(145deg, #09bb07, #008b00);

      // margin-top: 4rpx;
    }
  }

  .detail {
    display: flex;
    padding-top: 5px;
    padding-bottom: 5px;
    position: relative;
    margin: 0px 30rpx 0px 0px;
    color: #717171;
    .time {
      display: flex;
      margin-bottom: 20rpx;
      width: 100%;

      .imageBg {
        width: 25rpx;
        height: 25rpx;
        margin-right: 20rpx;
      }
      .text {
        line-height: 20rpx;
        font-size: 24rpx;
        width: 300rpx;
        word-break: break-all;
      }
    }
  }

  .bottom {
    padding-top: 10rpx;
    color: #111111;
  }
}
.box-button {
  width: 90rpx;
  height: 40rpx;
  display: flex;
  justify-content: center;
  align-items: center;

  background: #026cfe;
  color: #ffffff;
  border-radius: 15rpx;
  position: absolute;
  bottom: -10rpx;
  right: -20rpx;
  font-size: 18rpx;
  z-index: 1;
}
.box-delete {
  background: #19be6b;
}
.box-bottom {
  width: 100%;
  display: flex;
}
.icon-img {
  // width: 200rpx;
  height: 50rpx;
  position: absolute;
  bottom: -50rpx;
  font-size: 24rpx;
  z-index: 1000;
  display: flex;
  justify-content: start;
  align-items: start;
  image {
    width: 35rpx;
    height: 35rpx;
  }
}
.video {
  right: 0rpx;
}
.pdf {
  right: 200rpx;
}
.sjtz {
  right: 400rpx;
  // top: 80rpx;
}
</style>
